
<div class="relative flex w-full max-w-[24rem]">
  <button aria-expanded="false" aria-haspopup="menu" id=":R1H2:" class="justify-center align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md hover:bg-stone-100 relative bg-gradient-to-b from-white to-white text-stone-700 rounded-lg hover:bg-gradient-to-b hover:from-stone-50 hover:to-stone-50 hover:border-stone-200 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.35),inset_0_-1px_0px_rgba(0,0,0,0.20)] after:pointer-events-none transition antialiased outline-none group flex items-center gap-2 rounded-r-none border border-r-0 border-stone-200 bg-stone-200 pl-3">
    <img src="https://flagcdn.com/ke.svg" alt="Kenya" class="h-4 w-4 rounded-full object-cover" />+254</button>
  <div class="relative w-full">
    <input placeholder="Mobile Number" type="text" class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-stone-800 dark:text-white placeholder:text-stone-600/60 ring-transparent border border-stone-200 transition-all ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-sm py-2 px-2.5 ring shadow-sm bg-white rounded-lg duration-100 hover:border-stone-300 hover:ring-none focus:border-stone-400 focus:ring-none rounded-l-none peer" />
  </div>
</div>
